<template>
	<view>
		<view>
			<fui-form ref="form">
				<fui-form-item label="认证身份" labelSize="26">
					<view style="float:right" @click="showRole">{{selectRoles.text}}</view>
				</fui-form-item>
				<view style="padding:20rpx">上传身份认证材料*</view>
				<view style="padding:20rpx;">
					<fui-upload immediate :url="uploadUrl" :fileList="uploadFiles" ref="upload" width="200" height="200"
						@success="uploadSuccess" @error="error" @complete="uploadComplete" Right></fui-upload>
				</view>
				<view style="padding:20rpx">补充信息（选填）</view>
				<fui-textarea v-model="selectRoles.RoleAuthMemo"
					placeholder="输入更多信息可提高认证成功率，限200字以内，如:微博认证博主，图虫认证摄影师等"></fui-textarea>
			</fui-form>
		</view>
		<view style="height:100rpx;"></view>
		<view class="saveBtns">
			<fui-button background="#FFDD00" width="100%" height="70rpx" color="#000" class="saveBtn"
				@click="submitOrder">提交认证</fui-button>
		</view>
		<fui-picker linkage :options="roles" :show="roleShow" @change="changeRole"
			@cancel="pickerCancel('role')"></fui-picker>

		<fui-toast ref="toast"></fui-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uploadUrl: 'https://api.meimo.comdns.cn/common/Upload/upload?file=uniapp&type=image',
				uploadStatus: {},
				uploadFiles: [],
				roleShow: false,
				roles: [],
				selectRoles: {
					text: '请选择要认证的身份',
					value: 0
				}
			};
		},
		onLoad() {
			this.getMyInfo()
		},
		methods: {
			getMyInfo() {
				this.$httpost('/UserCenter/myPersonAuth', {}).then(res => {
					// console.log('myPersonAuth', res)
					if (res.code == 200) {
						this.roles = res.data
						this.selectRoles = res.data[0]
						this.uploadFiles = JSON.parse(res.data[0].RoleAuthPic);
					}
				});
			},
			//上传成功时触发
			uploadSuccess(e) {
				// console.log('uploadSuccess', e)
				//e.res 为服务器返回数据
				//上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
				let res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}")
				// console.log('res', res)
				this.uploadStatus = e.status
				if (res.fileName) {
					//处理结果返回给组件 
					//res.data.url为上传成功后返回的图片地址
					//e.index为图片索引值
					this.$refs.upload.result(this.$baseUrl + res.fileName, e.index)
				}
			},
			//上传失败时触发
			uploadError(e) {
				this.uploadStatus = e.status
			},
			//选择图片或上传完成时触发
			uploadComplete(e) {

				// console.log('uploadStatus', e)
				this.uploadStatus = e.status
				this.uploadFiles = e.urls
				if (this.uploadStatus === 'success' && e.action === 'upload') {
					// let options = {}
					//提示信息
					// options.text = '上传完成！';
					// this.fui.toast('上传完成！')
					// this.$refs.toast.show(options)
					//已上传完成的图片列表 this.urls
					// console.log('uploadUrls', this.uploadFiles)
				}
			},
			pickerCancel() {
				this.roleShow = false
			},
			showRole() {
				this.roleShow = true
			},
			changeRole(e) {
				// console.log(e)
				this.selectRoles = this.roles[e.index]
				this.uploadFiles = JSON.parse(this.roles[e.index].RoleAuthPic);
				this.roleShow = false
			},
			submitOrder() {
				// console.log('this.uploadFiles', this.uploadFiles)

				if (this.selectRoles.value == 0) {
					this.$common.showToast("请选择要认证的身份！");
					return false;
				}

				if (this.uploadFiles.length == 0) {
					this.$common.showToast("请上传你要认证的材料！");
					return false;
				} else {
					this.selectRoles.RoleAuthPic = this.uploadFiles
				}



				// console.log('this.selectRoles', this.selectRoles)

				this.$httpost('/UserAction/savePersonAuth', {
					formData: this.selectRoles
				}).then(AuthRes => {
					// console.log('savePersonAuth', AuthRes)

					if (AuthRes.code == 200) {

						uni.showModal({
							title: '认证提交成功！请等待审核',
							showCancel: false,
							success: (res) => {
								uni.navigateBack()
							}
						})

					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.saveBtns {
		width: 80vw;
		margin: auto
	}

	.saveBtn {
		margin: auto;
	}
</style>